<template>
  <div class="singerInfo" >
      <i class="fa fa-angle-left" @click="back"></i>
      <div class="singimg">
         <img :src="singerList.img1v1Url">
         <span>{{singerList.name}}</span>
      </div>
      <div class="content">
        <BorderTitle>简介</BorderTitle>
        <div class="con">{{singerList.briefDesc}}</div>
      </div>
    <div class="select">
      <ul>
        <router-link :to="`/singersong/${singerList.id}/singhot/${singerList.id}`"  tag="li">热门歌曲</router-link>
        <router-link :to="`/singersong/${singerList.id}/singmv/${singerList.id}`"  tag="li">MV</router-link>
      </ul>
    </div>
    <router-view @play="$emit('play',$event)"></router-view>
  </div>
</template>
<script>
import  BorderTitle  from "../components/BorderTitle";
export default {
  
  props:['id'],
  data(){
    return{
      singerList:[],
    }
  },
  methods:{
     back(){
       this.$router.push('/singger')
     },
  },
  components:{
    BorderTitle
  },
  created(){
    // 歌手描述
    this.$http.get('/artists/desc',{
      params:{
        id:this.id
      }
    }).then(d=>{
      this.singerList = d.data.artist;
      console.log(this.singerList);
    })
  }
}
</script>
<style lang="less" scoped>
.singerInfo{
  margin-top: -124px;
  position: relative;
  .fa-angle-left{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    font-size: 30px;
    color:#fff;
    z-index: 10;
  }
  .singimg{
    position: relative;
    width: 100%;
    img{
      width: 100%;
      height: 100%;
    }
    span{
      position: absolute;
      top: 85%;
      left: 3%;
      color: #fff;
      font-size: 50px;
      font-weight: 600;
    }
  }
  .content{
    .con{
      padding: 0px 10px;
    }
  }
  .select{
    padding-top: 10px;
    ul{
      display: flex;
      li{
        flex: 1;
        text-align: center;
        line-height: 40px;
       &.router-link-exact-active{
        color: #EE6A22;
       }
      }
    }

  }
    
}
</style>